<template>
	<view class="fixed_bar_c" id="fixed_bar_c_id">
		<slot></slot>
		<view class="env"></view>
	</view>
	<view class="brace"></view>
</template>

<script setup>
	import { queryNode } from '@/utils/common/index';
	import { ref, onMounted, onUpdated, getCurrentInstance } from 'vue';

	let height = ref('0px');
	onMounted(() => { getHeight(); })
	onUpdated(() => { getHeight(); })

	const getHeight = () => {
		let that = getCurrentInstance();
		queryNode(that, '#fixed_bar_c_id').then(res => {
			height.value = (res.height + 30) + 'px';
		})
	}
</script>

<style lang="scss" scoped>
	.fixed_bar_c {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		padding: 10px 14px;
		background-color: #fff;
	}

	.brace {
		height: v-bind(height);
	}

	/**适配iphoneX底部安全区域 */
	.env {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
